﻿<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>CSS3属性选择器的使用</title>
  <style type="text/css">
    .demo {
      width: 300px;
			border: 1px solid #ccc;
			padding: 10px;	
      overflow: hidden;
      margin: 20px auto;
		}

		.demo a {
			float: left;
			display: block;
			height: 50px;
			width: 50px;
			border-radius: 10px;
			text-align: center;
			background: #aac;
			color: blue;
      font: bold 20px/50px Arial;
			margin-right: 5px;
			text-decoration: none;
      margin: 5px;
		}
/* 
    a[id]{background-color:yellow;}

 a[id][title]{background-color: red;}
 
    a[id=first]{background-color:red;}
    a[class="links"]{background-color:yellow;}

  a[lang|=zh]{background-color: yellow;}

  a[title~=website]{background-color:yellow;}

  a[class*=links]{background-color:yellow;}
 
  a[href^=http]{background-color:yellow;}
 */
 a[href$=png]{background-color:yellow;}
  </style>
</head>
<body>
	<div class="demo">
		<a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
		<a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
		<a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
		<a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
		<a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
		<a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
		<a href="/a.pdf" class="links item" title="open the website" lang="cn">7</a>
		<a href="/abc.pdf" class="links item" title="close the website" lang="en-zh">8</a>
		<a href="abcdef.doc" class="links item" title="http://www.sina.com">9</a>
		<a href="abd.doc" class="linksitem last" id="last">10</a>
	</div>
</body>
</html>